<template>
	<view class="box flex flex-column justify-start align-center">
		<view v-if="user.role == '老师'" class="grade flex flex-column justify-between align-start mt-3"
			style="background-color: #f6eefe;  width: 75%; height: 280rpx; padding: 40rpx; border-radius: 25rpx; box-shadow: 0 4px 7px #7e3db4;">
			<text style="font-size: 38rpx; color: #7e3db4;">教学年级</text>
			<view class="gradeBtn" style=" display: grid; grid-template-columns: 50% 50%;  width: 100%; height: 70%; ">
				<view class="flex justify-center align-center" v-for="(item,index) in grade" :key="index"
					@click="choseGrade(index)"
					:style="{backgroundColor: item.state ? '#a855f7' : '#e9dff4', color: item.state ? '#ffffff' : '#7e3db4'}"
					style="border-radius: 50rpx; margin: 10rpx; ">
					{{item.name}}
				</view>
			</view>
		</view>

		<view class="subject flex flex-column justify-between align-start mt-3"
			style="background-color: #f6eefe;  width: 75%; padding: 40rpx; border-radius: 25rpx; box-shadow: 0 4px 7px #7e3db4;">
			<text style="font-size: 38rpx; color: #7e3db4;">{{user.role=='老师' ? '教学科目' :'辅导科目'}}</text>

			<view class="subjectBtn1 mt-3"
				style=" display: grid; grid-template-columns: 33.33% 33.33% 33.33%;  width: 100%; ">
				<view class="flex justify-center align-center p-1" v-for="(item,index) in subject" :key="index"
					@click="choseSubject(index)"
					:style="{backgroundColor: item.state ? '#a855f7' : '#e9dff4', color: item.state ? '#ffffff' : '#7e3db4',fontSize: item.name == '+' ? '45rpx' : '30rpx'}"
					style="border-radius: 50rpx; height: 70rpx; margin: 10rpx;">
					<view class="flex justify-center align-center " style=" width: 70%; height: 80%; ">
						{{item.name}}
					</view>

				</view>
			</view>
			<u-modal :show="addSubjectShow" title="添加科目" :showCancelButton="true" :closeOnClickOverlay="true"
				@cancel="addSubjectShow = false" @confirm="addSubject">
				<u--input placeholder="请输入科目名称" maxlength="6" border="surround" v-model="addSubjectName"></u--input>
			</u-modal>

		</view>

		<view class="tag flex flex-column justify-between align-start mt-3"
			style="background-color: #f6eefe;  width: 75%; padding: 40rpx; border-radius: 25rpx; box-shadow: 0 4px 7px #7e3db4;">
			<text style="font-size: 38rpx; color: #7e3db4;">{{user.role=='老师' ? '独特标签' :'期望标签'}}</text>
			<view class="tags flex justify-center align-center flex-wrap mt-2" style="width: 100%;">
				<view class="flex justify-center align-center mt-2 mr-2" v-for="(item,index) in tags" :key="index"
					@click="choseTag(index)"
					:style="{backgroundColor: item.state ? '#a855f7' : '#e9dff4', color: item.state ? '#ffffff' : '#7e3db4'}"
					style="border-radius: 50rpx; height: 30rpx; font-size: 28rpx; padding: 10rpx 25rpx; ">
					{{item.name}}
				</view>
			</view>

			<view class="addTag flex justify-center align-center mx-3 mt-3" style="width: 90%;">
				<u--input :class="focus_state ? 'inputBorder' : '' " placeholder="添加自定义标签" style="border-radius: 25rpx;"
					border="surround" v-model="addTagName" maxlength="6" @focus="focus_state = true"
					@blur="focus_state = false"></u--input>


				<u-button type="primary" @click="addTag" text="添加" color="#a855f7"
					style="width: 30%; border-radius: 25rpx; margin-left: 25rpx;"></u-button>
			</view>

		</view>

		<view class="time flex flex-column justify-between align-start my-3"
			style="background-color: #f6eefe;  width: 75%; padding: 40rpx; border-radius: 25rpx; box-shadow: 0 4px 7px #7e3db4;">
			<text style="font-size: 38rpx; color: #7e3db4;">授课时间</text>
			<view class="day_pick flex  mt-3 pl-2" style=" width: 100%;">
				<el-select v-model="dayValue" class="el_select" style=" width: 50%; " @change="choseWeek">
					<el-option style="color: #a855f7;" v-for="item in teachingTime" :key="item.day" :label="item.day"
						:value="item.day">
					</el-option>
				</el-select>
				<u-button type="primary" @click="addTime(weekIndex)" text="添加" color="#a855f7"
					style="width: 28%; border-radius: 25rpx; margin-left: 70rpx;"></u-button>
			</view>

			<view class="times_select flex align-center px-2 mt-3"
				v-for="(item,index) in teachingTime[weekIndex].times">
				<el-time-select :editable="false" placeholder="起始时间" v-model="item.start_time" style="width: 50%;"
					:picker-options="{
            	      start: '08:00',
            	      step: '01:00',
            	      end: '21:00',
					  minTime: teachingTime[weekIndex].times[index-1] ? teachingTime[weekIndex].times[index-1].end_time : '7:00'
					  
            	    }">
				</el-time-select>
				<text style="color: #a855f7; padding: 0 10rpx; font-size: 40rpx;">-</text>
				<el-time-select :editable="false" :disabled="item.start_time == '' ? true :false" placeholder="结束时间"
					style="width: 50%;" v-model="item.end_time" :picker-options="{
					       start: '08:00',
					       step: '01:00',
					       end: '21:00',
					       minTime: item.start_time
					     }">
				</el-time-select>
			</view>
		</view>

		<view class="time flex flex-column justify-between align-start mb-3"
			style="background-color: #f6eefe;  width: 75%; padding: 40rpx; border-radius: 25rpx; box-shadow: 0 4px 7px #7e3db4;">
			<text style="font-size: 38rpx; color: #7e3db4;">{{user.role=='老师' ? '薪资要求' :'付费范围'}}</text>
			<view class="input_money flex align-center mt-3 px-2">
				<el-input @blur="InputBlur" maxlength="3" v-model="minInput" placeholder="最低 (元/时)"></el-input>
				<text style="color: #a855f7; padding: 0 10rpx; font-size: 40rpx;">-</text>
				<el-input @blur="InputBlur" maxlength="3" v-model="maxInput" placeholder="最高 (元/时)"></el-input>
			</view>
		</view>


		<view class="time flex flex-column justify-between align-start mb-3"
			style="background-color: #f6eefe;  width: 75%; padding: 40rpx; border-radius: 25rpx; box-shadow: 0 4px 7px #7e3db4;">
			<text style="font-size: 38rpx; color: #7e3db4;">{{user.role=='老师' ? '教学经验' :'学习情况'}}</text>
			<view class="content mt-3" style="width: 100%;">
				<el-input type="textarea" :rows="3" placeholder="请简要描述你的学习情况..." v-model="textarea">
				</el-input>
			</view>

		</view>


		<view v-if="user.role=='老师'" class="time flex flex-column justify-between align-start mb-3"
			style="background-color: #f6eefe;  width: 75%; padding: 40rpx; border-radius: 25rpx; box-shadow: 0 4px 7px #7e3db4;">
			<text style="font-size: 38rpx; color: #7e3db4;">试讲视频</text>
			<text class="my-3" style="font-size: 28rpx; color: #7e3db4; ">老师可以上传自己简短的讲课视频，使学生更好地了解你的讲课风格</text>

			<uni-file-picker ref="files" :list-styles="listStyles" v-model="videoUrl" @success="submitSuccess" limit="1"
				file-mediatype="video" :auto-upload="false">
				<u-button text="添加" color="#a855f7" style="width: 50%; border-radius: 25rpx;"></u-button>
			</uni-file-picker>


		</view>



		<view class="submit mb-3" style="width: 85%; ">
			<u-button @click="submit" text="发布订单" color="linear-gradient(to right bottom, #8e2ce9, #3d076d)"
				style="width: 100%; border-radius: 25rpx;"></u-button>
		</view>

	</view>
</template>

<script>
	const db = uniCloud.database()
	export default {
		data() {
			return {
				minInput: "",
				maxInput: "",
				textarea: '',
				videoUrl: {
					name: "",
					extname: "mp4",
					url: ""
				},
				listStyles: {
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: false,
					// 线条样式
					borderStyle: {
						width: 2,
						color: '#8e2ce9',
						radius: 25
					}
				},

				grade: [{
						name: "小学",
						state: false
					},
					{
						name: "初中",
						state: false
					},
					{
						name: "高中",
						state: false
					},
					{
						name: "大学",
						state: false
					}
				],
				subject: [{
						name: "语文",
						state: false
					},
					{
						name: "数学",
						state: false
					},
					{
						name: "英语",
						state: false
					},
					{
						name: "物理",
						state: false
					},
					{
						name: "化学",
						state: false
					},
					{
						name: "生物",
						state: false
					},
					{
						name: "历史",
						state: false
					},
					{
						name: "地理",
						state: false
					},
					{
						name: "政治",
						state: false
					},
					{
						name: "+",
						state: false
					}

				],
				tags: [{
						name: "耐心",
						state: false
					},
					{
						name: "温柔",
						state: false
					},
					{
						name: "严厉",
						state: false
					},
					{
						name: "幽默",
						state: false
					},
					{
						name: "有经验",
						state: false
					},
					{
						name: "善于沟通",
						state: false
					}
				],
				dayValue: "周一",
				weekIndex: 0,
				teachingTime: [{
						day: "周一",
						times: [{
							start_time: "",
							end_time: "",
							state: false
						}]
					},
					{
						day: "周二",
						times: [{
							start_time: "",
							end_time: "",
							state: false
						}]
					},
					{
						day: "周三",
						times: [{
							start_time: "",
							end_time: "",
							state: false
						}]
					},
					{
						day: "周四",
						times: [{
							start_time: "",
							end_time: "",
							state: false
						}]
					},
					{
						day: "周五",
						times: [{
							start_time: "",
							end_time: "",
							state: false
						}]
					},
					{
						day: "周六",
						times: [{
							start_time: "",
							end_time: "",
							state: false
						}]
					},
					{
						day: "周日",
						times: [{
							start_time: "",
							end_time: "",
							state: false
						}]
					}

				],

				addSubjectShow: false,
				addSubjectName: "",
				addTagName: "",
				focus_state: false,

				user: {}

			};
		},
		onLoad() {
			this.init()

		},
		methods: {
			init() {
				uni.getStorage({
					key: "jiajiao_demo_account",
					success: res => {
						this.user = res.data
					}
				})
			},
			choseGrade(index) {
				this.grade[index].state = !this.grade[index].state
			},
			choseSubject(index) {
				if (this.subject[index].name != '+')
					this.subject[index].state = !this.subject[index].state
				else {
					this.addSubjectShow = true
				}
			},
			choseTag(index) {
				this.tags[index].state = !this.tags[index].state
			},
			choseWeek(index) {
				switch (index) {
					case '周一':
						this.weekIndex = 0;
						break;
					case '周二':
						this.weekIndex = 1;
						break;
					case '周三':
						this.weekIndex = 2;
						break;
					case '周四':
						this.weekIndex = 3;
						break;
					case '周五':
						this.weekIndex = 4;
						break;
					case '周六':
						this.weekIndex = 5;
						break;
					case '周日':
						this.weekIndex = 6;
						break;

				}
			},
			addSubject() {
				if (this.subject.find(item => item.name == this.addSubjectName)) {
					uni.showToast({
						title: "不能有重复的科目！",
						icon: 'error'
					})
				} else if (this.addSubjectName == '') {
					uni.showToast({
						title: "不能空白！",
						icon: 'error'
					})
				} else {
					let newSubject = {
						name: this.addSubjectName,
						state: false
					}

					this.subject.splice(this.subject.length - 1, 0, newSubject)
				}
				this.addSubjectName = ""
				this.addSubjectShow = false
			},
			addTag() {
				if (this.tags.find(item => item.name == this.addTagName)) {
					uni.showToast({
						title: "不能有重复的标签！",
						icon: 'error'
					})
				} else if (this.addTagName == '') {
					uni.showToast({
						title: "不能空白！",
						icon: 'error'
					})
				} else {
					let newSubject = {
						name: this.addTagName,
						state: false
					}

					this.tags.push(newSubject)
				}
				this.addTagName = ""
			},

			addTime(index) {
				let time = {
					start_time: "",
					end_time: "",
					state: true
				}
				this.teachingTime[index].times.push(time)
			},

			InputBlur() {
				if (this.maxInput != '' && this.minInput != '') {

					if (Number(this.maxInput) <= Number(this.minInput)) {
						console.log("min", this.minInput);
						console.log("max", this.maxInput);
						uni.showToast({
							title: "填写有误噢~",
							icon: 'error'
						})
						this.maxInput = ''
						this.minInput = ''
					}
				}

			},


			submitSuccess(e) {
				this.videoUrl.url = e.tempFilePaths[0]

			},


			async submit() {
				uni.showLoading({
					title: "发布中"
				})
				let gradeState = this.grade.find(item => item.state == true)
				let subjectState = this.subject.find(item => item.state == true)
				let tagState = this.tags.find(item => item.state == true)
				let timeState = this.teachingTime.find(item => item.times[0].start_time != '' && item.times[0]
					.end_time)
				let moneyState = this.minInput != '' && this.maxInput != ''
				let contentState = this.textarea != ''
				let money = {
					min: this.minInput,
					max: this.maxInput
				}
				if (this.user.role == '老师') {
					if (gradeState && subjectState && tagState && timeState && moneyState && contentState) {
						await this.$refs.files.upload()
						await db.collection("order").add({
							submit_user: this.user._id,
							grade: this.grade,
							subject: this.subject,
							tags: this.tags,
							times: this.teachingTime,
							money,
							content: this.textarea,
							role: this.user.role,
							video: this.videoUrl.url,
							publicTime: Date.now()
						});

						uni.hideLoading();
						uni.showToast({
							title: "发布成功",
							duration: 1000
						}).then(res => {
							uni.navigateBack();
						})
					} else {
						uni.showToast({
							title: "有没填写的地方噢~",
							icon: 'none'
						})
					}
				}
				
				else {
					if ( subjectState && tagState && timeState && moneyState && contentState) {
						await db.collection("order").add({
							submit_user: this.user._id,
							subject: this.subject,
							tags: this.tags,
							times: this.teachingTime,
							grade:[{"name":`${this.user.school}`,state:true}],
							money,
							content: this.textarea,
							role: this.user.role,
							publicTime: Date.now()
						});
					
						uni.hideLoading();
						uni.showToast({
							title: "发布成功",
							duration: 1000
						}).then(res => {
							uni.navigateBack();
						})
					} else {
						uni.showToast({
							title: "有没填写的地方噢~",
							icon: 'none'
						})
					}
					
					
				}


			}





		}

	}
</script>

<style>
	.box {
		background-color: #bf82fc;
		width: 100%;
		height: 100%;
	}

	.inputBorder {
		border: 2px solid #a855f7 !important;
	}

	::v-deep .el-input>:focus {
		border: 2px solid #a855f7 !important;
	}

	::v-deep .el-input__inner {
		color: #a855f7;
	}
	
	::v-deep.el-textarea>:focus{
		border: 2px solid #a855f7 !important;
	}
</style>